<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图片切换</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="mask">
      <div class="center">
        <!-- 顶部logo -->
        <h2 class="title">
          <img src="./images/logo.png" alt="" />
        </h2>
        <!-- 图片 -->
        <img class="cover" src="./images/1.png" alt="" />
        <!-- 左箭头 -->
        <a href="javascript:void(0)" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right">
          <img src="./images/next.png" alt="" />
        </a>
      </div>
    </div>
    <!-- 导入jQuery -->
    <script src="./jquery/jquery-3.5.1.min.js"></script>
    <script>
      // 箭头缩放
      $('.center a')
        .mouseenter(function () {
          $(this).css('transform', 'scale(1.1)')
        })
        .mouseleave(function () {
          $(this).css('transform', 'scale(1)')
        })

      // 默认隐藏左侧按钮
      $('.left').css('display', 'none')

      // 右侧按钮
      let index = 1
      $('.right').click(function () {
        index++
        $('.cover').attr('src', `./images/${index}.png`)
        $('.left').css('display', 'block')
        if (index == 5) {
          $(this).css('display', 'none')
        }
      })
      // 左侧按钮
      $('.left').click(function () {
        index--
        $('.cover').attr('src', `./images/${index}.png`)
        $('.right').css('display', 'block')
        if (index == 1) {
          $(this).css('display', 'none')
        }
      })
    </script>
  </body>
</html>
